import React from 'react';
import {Card, Row, Col, Button, Modal, Input, Tooltip} from 'antd';
const { TextArea } = Input;
import {browserHistory} from 'react-router';
import * as actions from './../../../actions/backstage/feedbackAction';

export default class feedbackDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          feedbackVisible: false,
          isDisable: true,
          replyContent: '',
          userProfile: {},
          feedback: {}
        };
    }
    componentDidMount(){
        this.refreshData();
    }
    refreshData(){
        actions.feedbackDetail(this, this.props.routeParams.id);
    }
    closeModal(){
        this.setState({feedbackVisible: false});
    }
    btnShowReply(){
        this.setState({feedbackVisible: true});
    }
    onChangeValue(e){
        this.setState({replyContent: e.target.value});
    }
    btnReply(){
        if(this.state.replyContent.trim() == ""){
          Modal.warning({
            title: '提示：',
            content: '请输入回复意见。'
          });
        }else {
          this.state.feedback.replyContent = this.state.replyContent;
          actions.replyFeedback(this, this.state.feedback);
        }
    }
    render() {
        return (
            <div>
                <div className="divBaseInfo">
                    <div className="divTitle">反馈人信息</div>
                    <Row type="flex" className="rowLine">
                      <Col order={1}><img src={((this.state.userProfile.photoPic == undefined)?"/src/styles/images/default.png":"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + this.state.userProfile.photoPic)} className="imgHeader" style={{borderRadius: '50%', boxShadow: '0 0 10px #adadad'}} /></Col>
                      <Col order={2}>姓名：</Col>
                      <Col order={3}>{((this.state.userProfile.firstName == undefined)?"":this.state.userProfile.firstName) + " " + ((this.state.userProfile.lastName == undefined)?"":this.state.userProfile.lastName)}</Col>
                      <Col order={4}>，性别：</Col>
                      <Col order={5}>{(this.state.userProfile.gender==1)?"男":"女"}</Col>
                      <Col order={6}>，电子邮件：</Col>
                      <Col order={7}>{(this.state.userProfile.email == undefined)?"":this.state.userProfile.email}</Col>
                      <Col order={8} style={{float: 'left', position: 'absolute', marginLeft: '132px'}}><br />地址：{((this.state.userProfile.location == undefined)?"":this.state.userProfile.location) + "，街道：" + ((this.state.userProfile.position == undefined)?"":this.state.userProfile.position)}</Col>
                      <Col order={9} style={{float: 'left', position: 'absolute', marginLeft: '132px', marginTop: '19px'}}><br />工作：{this.state.userProfile.job}</Col>
                      <Col order={10} style={{float: 'left', position: 'absolute', marginLeft: '132px', marginTop: '38px'}}><br />反馈日期：{((this.state.feedback.commitTime == undefined)?"":new Date(this.state.feedback.commitTime).Format("yyyy-MM-dd hh:mm:ss"))}</Col>
                      <Col order={11} style={{float: 'left', position: 'absolute', marginLeft: '132px', marginTop: '57px'}}><br />个人简介：{((this.state.userProfile.overview == undefined)?"":this.state.userProfile.overview)}</Col>
                    </Row>

                    <div className="divTitle">
                      反馈内容
                      <Button type="primary" className="btnReply" icon="message" onClick={this.btnShowReply.bind(this)} disabled={this.state.isDisable} style={{marginTop: '4px'}}>回复</Button>
                    </div>
                      <div className="divContent">内容：{(this.state.feedback.content == undefined)?"":this.state.feedback.content}</div>
                      <div className="divTimer">反馈时间：{(this.state.feedback.commitTime == undefined)?"":new Date(this.state.feedback.commitTime).Format("yyyy-MM-dd hh:mm:ss")}</div>
                      <div className="divReply" hidden={!this.state.isDisable}>
                          内容：{(this.state.feedback.replyContent == undefined)?"":this.state.feedback.replyContent}<br />
                          回复时间：{(this.state.feedback.replyTime == undefined)?"":new Date(this.state.feedback.replyTime).Format("yyyy-MM-dd hh:mm:ss")}
                      </div>
                    </div>
                    <Modal
                      title="回复反馈"
                      wrapClassName="vertical-center-modal"
                      visible={this.state.feedbackVisible}
                      onOk={this.btnReply.bind(this)}
                      onCancel={() => this.closeModal()}
                    >
                        <Tooltip
                          trigger={['focus']}
                          title="回复反馈意见。"
                          placement="bottomLeft"
                        >
                          <TextArea style={{resize: 'none'}} placeholder="请输入回复文字..." rows={4} value={this.state.replyContent} onChange={this.onChangeValue.bind(this)}/>
                        </Tooltip>
                    </Modal>
            </div>
        )
    }
}
